{% extends "base.html" %}

{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1><i class="bi bi-question-circle"></i> 错题详情 #{{ mistake.id }}</h1>
            <a href="{{ url_for('index') }}" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回列表
            </a>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <i class="bi bi-question-lg"></i> 题目
            </div>
            <div class="card-body">
                <p class="card-text">{{ mistake.question }}</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4 border-danger">
                    <div class="card-header bg-danger text-white">
                        <i class="bi bi-x-circle"></i> 你的答案
                    </div>
                    <div class="card-body">
                        <p class="card-text text-danger fw-bold">{{ mistake.user_answer }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card mb-4 border-success">
                    <div class="card-header bg-success text-white">
                        <i class="bi bi-check-circle"></i> 正确答案
                    </div>
                    <div class="card-body">
                        <p class="card-text text-success fw-bold">{{ mistake.correct_answer }}</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <i class="bi bi-tags"></i> 知识点
            </div>
            <div class="card-body">
                {% for kp in mistake.get_knowledge_points_list() %}
                    <span class="badge bg-secondary me-1">{{ kp }}</span>
                {% endfor %}
            </div>
        </div>
        
        {% if mistake.explanation %}
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <i class="bi bi-lightbulb"></i> 解析
            </div>
            <div class="card-body">
                <p class="card-text">{{ mistake.explanation }}</p>
            </div>
        </div>
        {% endif %}
        
        {% if mistake.exam_type %}
        <div class="card mb-4">
            <div class="card-body">
                <small class="text-muted">
                    <i class="bi bi-clipboard-check"></i> 考试类型: {{ mistake.exam_type }}
                </small>
            </div>
        </div>
        {% endif %}
        
        <div class="card mb-4">
            <div class="card-body">
                <small class="text-muted">
                    <i class="bi bi-calendar"></i> 记录时间: {{ mistake.date.strftime('%Y-%m-%d %H:%M:%S') }}
                </small>
            </div>
        </div>
    </div>
</div>
{% endblock %}